<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color: #ccc;
            background-image: url(img/reg_bg_min.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            /* background-size:100% 100%; */
        }
        .box{
            width:480px;
            height:680px;
            margin:100px;
            border-radius:10px;
            background-color: #fff;
            padding:50px 35px;
            padding-right:0;
            box-sizing: border-box;
        }
        .box>h3{
            font-size:36px;
            margin-bottom:4px;
        }
        .box>p{
            font-size:14px;
            color:#9B9B9B;
        }
        .box>p span{
            color:#2e58ff;
        }
        form{
            margin-top:58px;
        }
        form span{
          color:#333;
          font-size:14px;
          margin-right:15px;
          /* background-color: #2e58ff; */
          display: inline-block;
          height:40px;
          line-height:40px;
          width:43px;
          text-align: right;
        }
        form div input{
            width:343px;
            height:40px;
            margin-bottom:40px;
            outline: 0;
            border:1px solid #ccc;
            border-radius:3px;
            text-indent: 1em;
        }
        form div input:focus{
            border:1px solid #2e58ff;
        }
        form .verify input[type="text"]{
            width:206px;
        }
        form .verify [type="button"]{
            width:126px;
            height:42px;
            line-height:42px;
            text-align:center;
            border:1px solid #ccc;
            border-radius:3px;
            background-color: #fff;
            font-size:14px;
            color:#333;
            vertical-align: top;
            margin-left:6px;
            text-indent: 0em;
        }
        input[type="submit"]{
            width:399px;
            height:50px;
            border-radius: 25px;
            background-color: #bdcefc;
            line-height:50px;
            text-align: center;
            color:#fff;
            font-weight: bold;
            border:1px solid #bdcefc;
            font-size:16px;
            margin-top:40px;
        }
        form input[type="checkbox"]{
          margin-top:15px;
        }
        label{
            display: inline-block;
            font-size:12px;
            width:399px;
            vertical-align: top;
            margin-top:15px;
            color:#333;
        }
        label a{
           text-decoration: none;
           color:#2e58ff;
        }
    </style>
</head>
<body>
    <div class="box">
       <h3>欢迎注册</h3>
       <p>已有账号?&nbsp;&nbsp;<span>登录</span></p>
       <form action="">
        <div>
            <span>用户名</span>
            <input type="text" placeholder="请设置用户名">
        </div>
        <div>
            <span>手机号</span>
            <input type="text" placeholder="可以用于登录和找回密码">
        </div>
        <div>
            <span>密&nbsp;&nbsp;&nbsp;码</span>
            <input type="password" placeholder="请设置登录密码">
        </div>
        <div class="verify">
            <span>验证码</span>
            <input type="text" placeholder="请输入验证码">
            <input type="button" value="获取验证码">
        </div>
        <input type="submit" name="" id="" value="注册">
        <br>
        <input type="checkbox" id="info">
        <label for="info">
            阅读并接受
            <a href="#">《百度用户协议》</a>、
            <a href="#">《儿童个人信息保护声明》</a>及
            <a href="#">《百度隐私权保护声明》</a>
        </label>
       </form>
    </div>
</body>
</html>